<template>
  <div class="container">
    <el-dialog
      :visible.sync="value"
      width="55%"
      top="0"
      :before-close="handleClose"
      custom-class="dialogStyle"
    >
      <div slot="title" class="title_box">
        <h4>{{ title }}（{{ total || 0 }}）</h4>
        <div class="btn">
          <el-button type="primary" size="mini" :loading="isLoding" @click="refresh">刷 新</el-button>
          <span>（如有新增等群成员变动，请点击刷新来同步IM群成员数据）</span>
        </div>
      </div>

      <div class="seach">
        <div>
          <span class="title">成员ID：</span>
          <el-input v-model="search.id" placeholder="请输入内容" size="medium" />
        </div>

        <div>
          <span class="title">成员昵称：</span>
          <el-input v-model="search.name" placeholder="请输入内容" size="medium" />
        </div>

        <div>
          <span class="title">进群时间：</span>
          <el-date-picker
            v-model="time"
            size="medium"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :clearable="false"
            :picker-options="pickerOptions"
            @change="selectTime"
          />
        </div>

        <div>
          <el-button size="small" type="primary" @click="init">重置</el-button>
          <el-button size="small" type="primary" @click="getMenber">搜索</el-button>
        </div>
      </div>

      <div class="content">
        <el-table
          v-loading="loading"
          :data="list"
          :header-cell-style="{'color':'#000'}"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
            align="center"
          />
          <el-table-column
            prop="user_id"
            label="ID"
            width="100"
            align="center"
          />
          <el-table-column
            label="头像"
            align="center"
            width="140"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.user">
                <img :src="scope.row.user.avatar" alt="" style="width:50px;height:50px;object-fit:cover;">
              </div>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column
            label="昵称"
            align="center"
            width="140"
          >
            <template slot-scope="scope">
              {{ scope.row.user && scope.row.user.nickname }}
            </template>
          </el-table-column>
          <el-table-column
            label="性别"
            align="center"
            width="140"
          >
            <template slot-scope="scope">
              {{ scope.row.user && gender[scope.row.user.gender] }}
            </template>
          </el-table-column>
          <el-table-column
            label="角色"
            align="center"
            width="140"
          >
            <template slot-scope="scope">
              {{ role[scope.row.role] }}
            </template>
          </el-table-column>
          <el-table-column
            label="输赢状态"
            align="center"
            width="140"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.user && scope.row.user.group_setting_user" style="padding-left: 20px;">
                <p>状态：{{ scope.row.user.group_setting_user.type==1?'赢':'输' }}</p>
                <!-- <p>比例：{{ parseFloat(scope.row.user.group_setting_user.ratio) }}%</p> -->
              </div>
              <div v-else>-</div>
            </template>
          </el-table-column>
          <el-table-column
            label="进群时间"
            align="center"
            width="160"
          >
            <template slot-scope="scope">
              {{ scope.row.join_time }}
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            layout="prev, pager, next"
            :page-size="limit"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>

      <div v-if="selectUser.length" slot="footer" class="dialog-footer">
        <div>
          <span>输赢状态：</span>
          <el-radio v-model="type" label="1">赢</el-radio>
          <el-radio v-model="type" label="2">输</el-radio>
        </div>
        <!-- <div v-if="type==2">
          <span>输的几率（%）：</span>
          <el-input v-model="ratio" :min="0" :max="100" size="small" type="number" placeholder="请输入几率" style="width:200px" />
        </div> -->
        <div>
          <el-button size="small" @click="cancelSet">重 置</el-button>
          <el-button type="primary" size="small" @click="setting">确 定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '群成员'
    },
    groupId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      list: [],
      page: 1,
      limit: 7,
      total: 0,

      role: { 'Owner': '群主', 'Member': '群成员', 'Admin': '群管理员' },
      gender: ['未知', '男', '女'],

      selectUser: [], // 选中的用户

      type: '1',
      ratio: '',

      isLoding: false,
      time: '',
      search: {
        id: '',
        start_time: '',
        end_time: '',
        name: ''
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      }
    }
  },
  watch: {
    groupId(e) {
      this.init()
    }
  },
  methods: {
    // 选择时间
    selectTime(e) {
      this.search.start_time = e[0]
      this.search.end_time = e[1]
    },

    // 同步im群聊
    refresh() {
      this.isLoding = true
      this.$request.post('/admin/group/user/refresh', { group_id: this.groupId }).then(res => {
        this.isLoding = false
        if (res.code == 200) {
          this.init()
        }
      }).catch(() => { this.isLoding = false })
    },

    // 关闭弹窗
    handleClose() {
      this.$emit('input', false)
    },

    init() {
      this.page = 1
      this.limit = 7
      this.total = 0
      this.selectUser = []
      this.list = []
      this.search = {}
      this.getMenber()
    },

    // 分页
    handleCurrentChange(e) {
      this.page = e
      this.getMenber()
    },

    // 获取群成员
    getMenber() {
      this.loading = true
      this.$request.post('/admin/group/user/list', {
        group_id: this.groupId,
        limit: this.limit,
        page: this.page,
        ...this.search
      }).then(res => {
        this.loading = false
        if (res.code == 200) {
          this.list = res.data.data
          this.total = res.data.total
        }
      }).catch(() => { this.loading = false })
    },

    // 多选
    handleSelectionChange(e) {
      this.selectUser = e.map(item => {
        return item.user_id
      })
    },

    // 设置输赢状态
    setting() {
      this.$request.post('/admin/group/user/setting', {
        type: this.type,
        group_id: this.groupId,
        // users: this.selectUser.map(item => { return { 'user_id': item, 'ratio': this.type == 1 ? 100 : this.ratio } })
        users: this.selectUser.map(item => { return { 'user_id': item, 'ratio': 100 } })
      }).then(res => {
        if (res.code == 200) {
          this.$message.success(res.msg)
          this.selectUser = []
          this.getMenber()
        } else {
          this.$message.error(res.msg)
        }
      }).catch()
    },

    // 取消设置
    cancelSet() {
      this.$confirm('此操作将取消选中成员的输赢设置', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$request.post('/admin/group/user/setting', {
          type: 0,
          group_id: this.groupId,
          users: this.selectUser.map(item => { return { 'user_id': item, 'type': 0 } })
        }).then(res => {
          if (res.code == 200) {
            this.$message.success(res.msg)
            this.selectUser = []
            this.getMenber()
          } else {
            this.$message.error(res.msg)
          }
        }).catch()
      }).catch()
    }
  }
}
</script>

<style scoped>
  .container /deep/ .dialogStyle{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .container /deep/ .el-dialog__body {
    padding: 20px 20px 0;
  }
</style>
<style lang="scss" scoped>
    .seach{
      width: 100%;
      height: auto;
      padding: 10px;
      background-color: #fff;
      display: flex;
      justify-content: space-between;

      &>div{
        width: calc(100% / 4 - 20px);
        display: flex;
        align-items: center;

        &:nth-child(3){
          width: calc(100% / 4 + 80px);
        }
        &:nth-child(4){
          width: calc(100% / 4 - 100px);
        }
        &>.title{
          display: inline-block;
          width: 110px;
          font-size: 14px;
        }
      }
    }

  .content{
    width: 100%;
  }
  .btn{
    &>span{
      display: inline-block;
      color: #1989fa;
      text-align: center;
      cursor: pointer;
    }
  }

  .look{
    width: 100%;
    font-size: 14px;
    color: #1989fa;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    &>span{ margin-left: 10px; }
  }

  .dialog-footer{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    &>div{
      margin-left: 30px;
      &>span{
        font-size: 16px;
      }
    }
  }

  .pagination{
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
  }

  .title_box{
    width: 100%;
    align-items: center;
    display: flex;
    &>h4{
      line-height: 24px;
    }
    &>.btn{
      margin-left: 20px;
      &>span{
        font-size: 14px;
      }
    }
  }
</style>
